<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>注册</title>
        <link rel="stylesheet" href="./注册.css">
    </head>

    <body>
        <div class="box">
            <h2></h2>
            <div class="input-box">
                <label>用户名</label>
                <input type="text" placeholder="使用中文4~10个字符" class="qq">
                <span>请重新输入用户名</span>
            </div>
            <div class="input-box">
                <label>账号</label>
                <input type="text" class="ww">
                <span>账号不能为空</span>
            </div>
            <div class="input-box">
                <label>密码</label>
                <input type="password" placeholder="6~10个字符,含有大小写字母+数字" class="ee">
                <span>密码格式错误请重新输入</span>
            </div>
            <div class="input-box">
                <label>手机号</label>
                <input type="password" placeholder="11位数字组成" class="tt">
                <span>请输入正确的手机号</span>
            </div>
            <div class="input-box">
                <label>邮箱</label>
                <input type="password" class="yy">
                <span>请输入正确的邮箱</span>
            </div>
            <div class="input-box">
                <label>确认密码</label>
                <input type="password" placeholder="与密码一致 " class="kk">
                <span>密码不一致</span>
            </div>
            <div class="btn-box">
                <div>
                    <button onclick="zc()">注册</button>
                </div>
            </div>
        </div>

        <script>
            // 用户名
            var a = document.querySelector('.box .qq')
            var reg = /^[\u4e00-\u9fa5]{4,10}$/;
            a.addEventListener('blur', () => {
                if (!reg.test(event.target.value)) {
                    event.target.nextElementSibling.style.display = 'block'
                } else {
                    event.target.nextElementSibling.style.display = 'none'
                    localStorage.setItem('用户名', a.value)
                }
            })
            // 账号
            var n = document.querySelector('.box .ww')
            n.addEventListener('blur', () => {
                if (event.target.value == '') {
                    n.nextElementSibling.style.display = 'block'
                } else {
                    n.nextElementSibling.style.display = 'none'
                    localStorage.setItem('账号', n.value)
                }
            })
            // 密码!
            var g = document.querySelector('.box .ee')
            var reg2 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,10}$/
            g.addEventListener('blur', () => {
                if (!reg2.test(event.target.value)) {
                    event.target.nextElementSibling.style.display = 'block'
                } else {
                    event.target.nextElementSibling.style.display = 'none'
                    localStorage.setItem('密码', g.value)
                }
            })
            // 确认密码
            var b = document.querySelector('.box .kk')
            var reg3 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,10}$/
            b.addEventListener('blur', () => {
                if (!reg3.test(event.target.value)) {
                    event.target.nextElementSibling.style.display = 'block'
                } else {
                    event.target.nextElementSibling.style.display = 'none'
                }
            })
            // 手机号
            var v = document.querySelector('.box .tt')
            v.addEventListener('blur', () => {
                if (/^1\d{10}$/.test(v.value)) {
                    v.nextElementSibling.style.display = 'none'
                } else {
                    v.nextElementSibling.style.display = 'block'
                }
            })
            // 邮箱
            var c = document.querySelector('.box .yy')
            c.addEventListener('blur', () => {
                if (/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(c.value)) {
                    c.nextElementSibling.style.display = 'none'
                } else {
                    c.nextElementSibling.style.display = 'block'
                }
            })
            function zc() {
                //用正则表达式判断所有文本数据是否都符合条件
                if (!/^[\u4e00-\u9fa5]{4,10}$/.test(a.value)) {
                    alert('用户名格式有误');
                } else if (n.value == '') {
                    alert('账号格式有误');
                } else if (!/^[A-Za-z0-9]{6,10}$/.test(g.value)) {
                    alert('密码有误');
                } else if (g.value != b.value) {
                    alert('确认密码不一致');
                } else if (!/^[0-9]{11}$/.test(v.value)) {
                    alert('手机号格式有误');
                    // /^[0-9A-Za-z_]+@+[0-9A-Za-z_]+[.com]$/
                } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.value)) {
                    alert('邮箱格式有误');
                } else {
                    location.assign('./登录.html')
                }
            }
        </script>
    </body>

    </html>
</body>

</html>